<template>
	<view class="page">
		<view class="person-list">
			<view class="person-item" v-for="(item, index) in list" :key="index">
				<image class="person-avatar" mode="aspectFill" :src="item.avatar || '/static/images/default_avatar.png'">
				</image>
				<view class="user-info">
					<view class="top-info">
						<view class="username">{{ item.nickName }}</view>
						<view class="create-time">{{ item.createTime }}</view>
					</view>
					<view class="top-info">
						<view class="phone-num">{{ item.phone }}</view>
						<view class="btn" @click="subordinate(item)">查看下级</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyPromotion
	} from '@/apis/request.js';

	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 20,
					userId: 1
				},
				list: []
			};
		},
		methods: {
			getList(userId) {
				this.params.userId = uni.getStorageSync('userInfo').id;
				getMyPromotion(this.params).then(res => {
					if (this.params.pageNo == 1) {
						this.list = res.records;
					} else {
						if (this.list.length < res.total) {
							this.list = this.list.concat(res.records);
						} else {
							this.list = thid.list;
						}
					}
				});
			},
			subordinate(item) {
				uni.navigateTo({
					url: `/pages/MinePages/spread/subordinate?userId=${item.id}`
				});
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.params.pageNo = 1;
			this.list = [];
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.params.pageNo++;
			this.getList();
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f2f2f2ff;
		height: 100vh;

		.person-list {
			background-color: #fff;

			.person-item {
				padding: 30rpx;
				border-bottom: 2rpx solid #ececec;
				display: flex;
				align-items: center;

				.person-avatar {
					margin-right: 20rpx;
					flex-shrink: 0;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.user-info {
					width: 100%;

					.top-info {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.username {
							font-size: 28rpx;
						}

						.create-time {
							font-size: 22rpx;
							color: #999999;
						}

						.phone-num {
							margin-top: 14rpx;
							font-size: 22rpx;
							color: #999999;
						}

						.btn {
							width: 110rpx;
							height: 40rpx;
							border-radius: 20rpx;
							background: #32C59A;
							color: #fff;
							line-height: 40rpx;
							text-align: center;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
</style>